<template>
	<hyb-page :title="yg_title">
		<template v-slot:body>
			<form @submit="submit">
				<view class="gui-bg-white gui-dark-bg-level-3 ">


					<view class="gui-form-item gui-border-b gui-padding" v-if="tag =='sj_yg'">
						<text class="gui-form-label gui-secondary-text">选择商家</text>
						<view class="gui-form-body" @tap="chooseSj()">
							<input type="text" style="pointer-events: none;" class="gui-form-input" v-model="s_name" placeholder="请选择商家" />
						</view>

						<view @tap="chooseSj()" class="gui-icons gui-color-gray">&#xe601;</view>
					</view>

					<view class="gui-form-item gui-border-b gui-padding">
						<text class="gui-form-label gui-secondary-text">姓名</text>
						<view class="gui-form-body">
							<input type="text" class="gui-form-input" v-model="formData.y_name" placeholder="请输入内容" />
						</view>
					</view>

					<view v-if="base.yg_set.nl" class="gui-form-item gui-border-b gui-padding">
						<text class="gui-form-label gui-secondary-text">年龄</text>
						<view class="gui-form-body">
							<input type="text" class="gui-form-input" v-model="formData.y_age" name="y_age"
								placeholder="请输入内容" />
						</view>
					</view>

					<view v-if="base.yg_set.xb" class="gui-form-item gui-border-b gui-padding">
						<text class="gui-form-label gui-secondary-text">性别</text>
						<view class="gui-form-body gui-flex">

							<gui-radio :checked="formData.y_sex=='男'" @change="sexChange('男')">
								<text class="gui-text">男</text>
							</gui-radio>

							<gui-radio :checked="formData.y_sex=='女'" @change="sexChange('女')" class="gui-margin-x">
								<text class="gui-text">女</text>
							</gui-radio>
						</view>
					</view>


					<view class="gui-form-item gui-border-b gui-padding">
						<text class="gui-form-label gui-secondary-text">联系电话</text>
						<view class="gui-form-body">
							<!-- <hyb-phone v-model="formData.y_telphone"></hyb-phone> -->
							<input type="text" class="gui-form-input" v-model="formData.y_telphone" name="y_age"
								placeholder="请输入电话号码" />
						</view>
					</view>

					<view
						v-if="($store.state.base.yg_set.yg_dz) || (!$store.state.base.yg_set.yg_dz && tz_type != 'xg')"
						class="gui-form-item gui-border-b gui-padding">
						<text class="gui-form-label gui-secondary-text">所在地</text>
						<view class="gui-form-body">
							<hyb-city v-model="formData.y_address"></hyb-city>
						</view>
					</view>
					<view v-if="base.yg_set.xxdz" class="gui-form-item gui-border-b gui-padding">
						<text class="gui-form-label gui-secondary-text">详细地址：</text>
						<view class="gui-form-body">
							<input type="text" class="gui-form-input" v-model="formData.y_xxaddress"
								placeholder="请输入详细地址" />
						</view>
					</view>


					<view v-if="base.yg_set.zwjs" class="gui-form-item gui-border-b gui-padding">
						<!-- <text class="gui-form-label gui-secondary-text">服务内容</text> -->
						<view class="gui-form-body">
							<textarea type="textarea" class="gui-textarea" v-model="formData.jieshao" name="y_name"
								:placeholder="fb_placeholder?fb_placeholder: '请输入自我介绍'" />
						</view>
					</view>



					<view v-if="base.yg_set.gzzl" class="gui-form-item gui-border-b gui-padding">
						<text class="gui-form-label gui-secondary-text">工种/种类</text>
						<view class="gui-form-body">
							<hyb-jineng type="text" class="gui-form-input gui-flex1" disabled
								v-model="formData.y_jineng" placeholder="请选择你从事的工种/种类"></hyb-jineng>
						</view>
					</view>


					<!-- 	<view class="gui-form-item gui-border-b gui-padding">
						<text class="gui-form-label gui-secondary-text">添加标签</text>
						<view class="gui-form-body gui-flex">
							<input type="text" class="gui-form-input gui-flex1" v-model="formData.y_label"
								name="y_telphone" placeholder="请输入标签" />
						</view>
					</view> -->


					<!-- 	<view class="gui-form-item gui-border-b gui-padding">
						<text class="gui-form-label gui-secondary-text">入驻时长</text>
						<view class="gui-form-body gui-flex">
							<picker mode="selector" :range="ruzhu" @change="ruzhuChange" class="gui-flex1">
								<view class="gui-flex gui-row gui-nowrap gui-space-between gui-align-items-center">
									<text class="gui-text gui-secondary-text">{{ruzhu[ruzhu_index]}}</text>
									<text class="gui-form-icon gui-icons gui-text-center gui-color-gray">&#xe603;</text>
								</view>
							</picker>
						</view>
					</view> -->

					<view v-if="base.yg_set.sfzh" class="gui-form-item gui-border-b gui-padding">
						<text class="gui-form-label gui-secondary-text">{{base.zdm_a.sfzm}}</text>
						<view class="gui-form-body gui-flex">
							<input type="text" class="gui-form-input gui-flex1" v-model="formData.sfz_number"
								placeholder="点击输入...." />
						</view>
					</view>


					<view v-if="base.yg_set.tx" class="gui-form-item gui-border-b gui-padding">
						<text class="gui-form-label gui-secondary-text">头像</text>
						<view class="gui-form-body gui-flex">
							<hyb-upload ref="y_thumb" v-model="formData.y_thumb"></hyb-upload>
						</view>
					</view>

					<view v-if="base.yg_set.gzz" class="gui-form-item gui-border-b gui-padding">
						<text class="gui-form-label gui-secondary-text">工作照</text>
						<view class="gui-form-body gui-flex">
							<hyb-upload ref="y_gz_imgs" :maxFileNumber="12" v-model="formData.y_gz_imgs"></hyb-upload>
						</view>
					</view>

					<view v-if="base.yg_set.zjz" class="gui-form-item gui-border-b gui-padding">
						<text class="gui-form-label gui-secondary-text">证件照</text>
						<view class="gui-form-body gui-flex">
							<hyb-upload ref="y_zj_imgs" :maxFileNumber="12" v-model="formData.y_zj_imgs"></hyb-upload>
						</view>
					</view>

					<view v-if="base.yg_set.gzz" class="gui-form-item gui-border-b gui-padding">
						<text class="gui-form-label gui-secondary-text">生活照</text>
						<view class="gui-form-body gui-flex">
							<hyb-upload ref="y_sh_imgs" :width="100" :maxFileNumber="12"
								v-model="formData.y_sh_imgs"></hyb-upload>
						</view>
					</view>

					<view v-if="base.yg_set.sfzzp" class=" gui-border-b gui-padding">
						<view>
							<text class="gui-text gui-color-gray">{{base.zdm_a.sfzzpz}}</text>
						</view>
						<view
							class="gui-margin-top gui-idcard-items gui-bg-white gui-dark-bg-level-3 gui-flex gui-row gui-justify-content-center">
							<hyb-upload :bigBg="idCard1" ref="sfz_imgz" v-model="formData.sfz_imgz"></hyb-upload>
						</view>
					</view>
					<view v-if="base.yg_set.sfzzp" class="gui-border-b gui-padding">
						<view>
							<text class="gui-text gui-color-gray">{{base.zdm_a.sfzzpf}}</text>
						</view>
						<view
							class="gui-margin-top gui-idcard-items gui-bg-white gui-dark-bg-level-3 gui-flex gui-row gui-justify-content-center">
							<hyb-upload :bigBg="idCard2" ref="sfz_imgf" v-model="formData.sfz_imgf"></hyb-upload>
						</view>
					</view>



					<view class="gui-border-b gui-padding">
						<view>
							<text class="gui-text gui-color-gray">无犯罪记录照片</text>
						</view>
						<view
							class="gui-margin-top gui-idcard-items gui-bg-white gui-dark-bg-level-3 gui-flex gui-row gui-justify-content-center">
							<hyb-upload
								bigBg="https://xin-jia-zheng-1300612619.cos.ap-chengdu.myqcloud.com/users/9982/1743035043_6970081.png"
								ref="wfzjl_img" v-model="formData.wfzjl_img"></hyb-upload>
						</view>
					</view>

					<view class="gui-border-b gui-padding">
						<view>
							<text class="gui-text gui-color-gray">健康证</text>
						</view>
						<view
							class="gui-margin-top gui-idcard-items gui-bg-white gui-dark-bg-level-3 gui-flex gui-row gui-justify-content-center">
							<hyb-upload
								bigBg="https://xin-jia-zheng-1300612619.cos.ap-chengdu.myqcloud.com/users/9982/1743035239_2622052.png"
								ref="jkz_img" v-model="formData.jkz_img"></hyb-upload>
						</view>
					</view>

					<view class="gui-border-b gui-padding">
						<view>
							<text class="gui-text gui-color-gray">资格证</text>
						</view>
						<view
							class="gui-margin-top gui-idcard-items gui-bg-white gui-dark-bg-level-3 gui-flex gui-row gui-justify-content-center">
							<hyb-upload
								bigBg="https://xin-jia-zheng-1300612619.cos.ap-chengdu.myqcloud.com/users/9982/1743035341_1662417.png"
								ref="zgz_img" v-model="formData.zgz_img"></hyb-upload>
						</view>
					</view>



					<view
						class="gui-form-item gui-border-b gui-padding gui-flex gui-space-between gui-align-items-center">
						<view class="gui-bg-white gui-dark-bg-level-3 gui-padding">
							<gui-radio :checked="checked" @change="radioChange">
								<view class="gui-flex gui-row">
									<text class="gui-text gui-primary-text">我同意并遵守</text>
									<text class="gui-text gui-color-blue" @tap.stop.prevent="openXYPage">《入驻协议》</text>
								</view>
							</gui-radio>
						</view>

						<view class="gui-flex1" v-if="xiugai">
							<hyb-zhuxiao ref="zhuxiaoDialog">

								<view @tap="zhuxiao" class="gui-text-small gui-color-gray gui-icons ">&#xe613; 注销账号
								</view>
								<!-- <hyb-button @tap="zhuxiao" style="transform: scale(0.8);" label="注销"></hyb-button> -->
							</hyb-zhuxiao>
						</view>
					</view>


					<view class="gui-bg-white gui-dark-bg-level-3 gui-padding gui-margin-top">
						<button type="default" class="gui-button gui-bg-primary gui-noborder" @tap="confirm"
							style="border-radius:50rpx;">
							<text class="gui-color-white gui-button-text">提交{{xiugai?'修改':'审核'}}</text>
						</button>
					</view>
				</view>

			</form>
			<gui-area-picker ref="graceAddressPicker2" @confirm="confirm2" :value="formData.y_city">
			</gui-area-picker>



			<hyb-privacy ref="guimodal" :content="base.js_yyts" v-model="checked"></hyb-privacy>

			<!-- <gui-modal ref="guimodal" width="660rpx" :isCloseBtn="false" title="入驻协议">
				<template v-slot:content>
					<scroll-view scroll-y style="height: 50vh;" class="gui-bg-gray gui-dark-bg-level-2">
						<text class="gui-block gui-text" style="line-height:50rpx; padding:25rpx;">
							<rich-text :nodes="nodes"></rich-text>
						</text>
					</scroll-view>
				</template>
				<template v-slot:btns>
					<view class="gui-flex gui-rows gui-space-between">
						<text class="modal-btns gui-block-text gui-color-gray" @tap="agree(false)">不同意</text>
						<text class="modal-btns gui-block-text gui-primary-color" @tap="agree(true)">同意协议</text>
					</view>
				</template>
			</gui-modal> -->
		</template>
	</hyb-page>

</template>

<script>
	import graceChecker from "@/Grace6/js/checker.js";
	import parserHtml from "@/Grace6/js/parserHTML.js";
	export default {
		data() {
			return {
				nodes: [],
				s_name: '',
				formData: {
					y_name: "",
					y_rz: 1,
					y_sex: '男',
					y_address: '北京市-北京市-东城区',
					y_jineng: []

				},
				checked: false,
				xiugai: false,
				yg_title: this.$store.state.base.show_base.shifu_bie_ming + '入驻',
				sets: [],
				ruzhu: [],
				ruzhu_index: 0,
				tz_type: '',
				idCard1: 'https://img-cdn-tc.dcloud.net.cn/uploads/article/20210107/e53bf48607dcf795ab78e419dc5cf432.png',
				idCard2: 'https://img-cdn-tc.dcloud.net.cn/uploads/article/20210107/dac9c5c703b2a0bcd254a919d0da5632.png',
				rule: [{
						name: "y_name",
						checkType: "string",
						checkRule: "2,10",
						errorMsg: "姓名应为2-10个字符"
					},
					{
						name: "y_age",
						checkType: "between",
						checkRule: "18,100",
						errorMsg: "请输入正确年龄"
					},

					{
						name: "y_telphone",
						checkType: "phone",
						checkRule: "",
						errorMsg: "请输入正确手机号！"
					},

					{
						name: "y_jineng",
						checkType: "string",
						checkRule: "1,1024",
						errorMsg: "请选择至少一个技能！"
					},

					{
						name: "sfz_number",
						checkType: "idCard",
						checkRule: "",
						errorMsg: "请输入正确身份证号！"
					},

					// {
					// 	name: "y_thumb",
					// 	checkType: "string",
					// 	checkRule: "4,256",
					// 	errorMsg: "请上传头像！"
					// },

					// {
					// 	name: "sfz_imgz",
					// 	checkType: "string",
					// 	checkRule: "4,256",
					// 	errorMsg: "请上传身份证正面！"
					// },

					// {
					// 	name: "sfz_imgf",
					// 	checkType: "string",
					// 	checkRule: "4,256",
					// 	errorMsg: "请上传身份证反面！"
					// },


				]
			}
		},

		onLoad(options) {
			if (options.tz_type) {
				this.tz_type = options.tz_type;
			}

			if (!this.$store.state.base.yg_set.gzzl) {
				let index = this.rule.findIndex((val) => {
					return val.name == 'y_jineng'
				})
				this.rule.splice(index, 1)
			}

		},

		computed: {
			base: () => {
				return uni.storage.get("base");
			}
		},

		created() {
			// let base = uni.storage.get("base");
			// this.nodes = parserHtml.parserHTML(this.translate(base.xieyi));

			uni.gPost("yuangong/info").then((info) => {
				if (info == 101) {
					uni.showModal({
						title: "入驻提示",
						content: "您“我的发布”里有订单在待接单、竞价中、待验收中，不能申请入驻，请完成订单后，再可申请。",
						success: (res) => {
							uni.redirectTo({
								url: this.$store.state.base.hyzx_luj
							})

						}
					})
				}

				if (info) {
					if (info.y_styles == "审核通过") {
						this.formData = info;
						this.xiugai = true;
						this.yg_title = this.$store.state.base.show_base.shifu_bie_ming + '设置';
					} else {
						this.formData.y_id = info.y_id;
						this.formData = info;

					}
				}
				if (this.formData.y_s_id) {
					uni.gPost('shangjia/info', {
						s_id: this.formData.y_s_id
					}).then(res => {
						this.s_name = res.s_name
					})
				}
			})

			// uni.gPost("jishi/sets").then((list) => {
			// 	this.sets = list;
			// 	list.forEach((item) => {
			// 		this.ruzhu.push(item.r_time + "天/(￥" + item.r_money + ")");
			// 	})
			// 	this.formData.y_endtime = this.sets[this.ruzhu_index].r_time;
			// })
		},
		methods: {
			chooseSj() {
				uni.$once("choose_shangjia", (data) => {
					this.formData.y_s_id = data.s_id
					this.s_name = data.name
				})
				uni.navigateTo({
					url: '/hyb_o2o/shangjia/list/list?tag=1'
				})
			},
			zhuxiao() {
				this.$refs.zhuxiaoDialog.show();
			},

			agree(val) {
				this.checked = val;
				this.$refs.guimodal.close();
			},
			radioChange(e) {
				this.checked = e[0];
				console.log(this.checked)
			},

			sexChange(sex) {
				this.formData.y_sex = sex;
			},

			openXYPage: function() {
				this.$refs.guimodal.open();

			},

			ruzhuChange(e) {
				this.ruzhu_index = e.detail.value;
				this.formData.y_endtime = this.sets[this.ruzhu_index].r_time;
				console.log(this.formData.y_endtime)
			},
			async confirm() {
				if (!this.checked) {
					uni.showToast({
						title: "请同意协议!",
						icon: "error"
					})
					return;
				}
				let that = this;

				uni.showLoading({
					title: "提交中..."
				})

				if (that.$refs.y_thumb) {
					await that.$refs.y_thumb.uploadAsync()
				}

				if (that.$refs.sfz_imgz) {
					await that.$refs.sfz_imgz.uploadAsync()
				}


				if (that.$refs.sfz_imgf) {
					await that.$refs.sfz_imgf.uploadAsync()
				}

				if (that.$refs.y_gz_imgs) {
					await that.$refs.y_gz_imgs.uploadAsync()
				}

				if (that.$refs.y_zj_imgs) {
					await that.$refs.y_zj_imgs.uploadAsync()
				}

				if (that.$refs.y_sh_imgs) {
					await that.$refs.y_sh_imgs.uploadAsync()
				}

				if (that.$refs.wfzjl_img) {
					await that.$refs.wfzjl_img.uploadAsync()
				}

				if (that.$refs.jkz_img) {
					await that.$refs.jkz_img.uploadAsync()
				}

				if (that.$refs.zgz_img) {
					await that.$refs.zgz_img.uploadAsync()
				}

				console.log(that.formData)

				that.formData.tz_type = this.tz_type;
				let checkRes = graceChecker.check(that.formData, that.rule);
				if (checkRes) {
					uni.gPost("yuangong/ruzh", that.formData).then((res) => {
						uni.hideLoading();
						uni.showToast({
							title: "提交成功",
							success: () => {
								if (this.xiugai) {
									uni.redirectTo({
										url: "/hyb_o2o/jishi/mine/mine"
									})

								} else {
									uni.redirectTo({
										url: this.$store.state.base.hyzx_luj
									})
								}

							}
						});
					})
				} else {
					uni.hideLoading();
					uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
				}
			},
		}
	}
</script>

<style>
	.gui-form-label {
		width: 160rpx;
	}

	.modal-btns {
		line-height: 100rpx;
		height: 100rpx;
		font-size: 35rpx;
		text-align: center;
		width: 320rpx;
	}
</style>